import React,{PureComponent} from 'react';
import {ListItem,ListInfo,LoadMore} from '../styled';
import { connect} from "react-redux";
import {actionCreators} from '../store';
import {Link} from 'react-router-dom';

class List extends PureComponent{
    render(){
        const {list,getMoreList,page} =this.props;
        return <div>
            {list.map((item,index)=>{
                return     <ListItem key={index}>
                    <img className='pic'
                         src={item.get('imgUrl')}
                         alt=""/>
                         <Link to={'/detail/'+item.get('id')}>
                    <ListInfo>
                        <h3 className='title'>  {item.get('title')}</h3>
                        <p className='desc'>
                            {item.get('desc')}
                        </p>
                    </ListInfo>
                         </Link>
                </ListItem>
            })}
            <LoadMore onClick={()=>getMoreList(page)}>加载更多</LoadMore>
        </div>
    }

}
const mapStateToProps=(state)=>{
    return {
        list:state.getIn(['home','articleList']),
        page:state.getIn(['home','articlePage'])
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        getMoreList(page){
            dispatch(actionCreators.getMoreList(page))
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(List);